<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS Writing Modes Test: text-orientation - mixed in vertical-rl writing mode</title>
		<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp" />
		<link rel="help" title="5.1.  Orienting Text" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
		<link rel="match" href="reference/text-orientation-mixed-001-ref.xht" />
		<meta name="flags" content="font image" />
		<meta name="assert" content="This test checks that the alphabet is displayed on sideways, and it is verified whether the characters are aligned in the vertical direction including vertical writing characters (Japanese, Mongolian, Hangul, etc)." />
		<style type="text/css"><![CDATA[
			@font-face
			{
				font-family: "DejaVuSerifBook";
				src: url("support/DejaVuSerif-webfont.woff") format("woff");
				/* Filesize: 18096 bytes (17.7 KBytes) */
			}

			div {
				border: 1px solid gray;
				float: left;
				color: blue;
				font-family: "DejaVuSerifBook";
				font-size: 1.875em; /* equivalent to 30px */
				line-height: 1.4; /* equivalent to 42px: 
				so that top-half-leading is 6px
				and bottom-half-leading is 6px */
				margin: 10px;
			}

			div#vertical
			{
				-webkit-writing-mode: 		vertical-rl;
				-moz-writing-mode: 			vertical-rl;
				-o-writing-mode: 			vertical-rl;
				-ms-writing-mode:			vertical-rl;
				writing-mode: 				vertical-rl;
				-webkit-text-orientation:   mixed;
				-moz-text-orientation:   	mixed;
				-o-text-orientation:   		mixed;
				-ms-text-orientation:		mixed;
				text-orientation:			mixed;
			}

		    img {vertical-align: top;}

		]]></style>
	</head>
	<body>


	<p>Test passes if both "Text sample" rectangles are <strong>identical</strong>: only "T" should be displayed vertically and "ext Sample" should be displayed sideways.</p>

	<div id="vertical">Ｔext sample</div>

	<div><img src="./support/text-orientation-mixed-001.png" width="42" height="189" alt="Image download support must be enabled" /></div>

	</body>
</html>
